import React, { Component } from 'react';
import { connect } from 'dva';
import { Tag } from 'antd';

const EditSlot = props => {
  const { slots, del, click,editFlag } = props;

  const handleClose = val => {
    del(val);
  };

  const onClick = tag => {
    if (click) {
      click(tag.name);
    }
  };

  return (
    <div>
      {slots.map((tag, index) => {
        const isLongTag = tag.length > 20;
        const tagElem = (
          <span onClick={()=>onClick(tag)} style={{ cursor: click ? 'pointer' : 'none' }} key={index}>
            <Tag
              key={tag.id}
              closable={del ? true : false}
              onClose={() => handleClose(tag)}
              style={{
                padding: '5px 10px',
                overflow: 'hidden',
                borderRadius: '32px',
              }}
            >
              {isLongTag ? `${tag.name.slice(0, 20)}...` : tag.name}
            </Tag>
          </span>
        );
        return isLongTag ? (
          <Tooltip title={tag.name} key={tag.key}>
            {tagElem}
          </Tooltip>
        ) : (
          tagElem
        );
      })}
    </div>
  );
};

export default EditSlot;
